<template>
  <div class="wrap">
    <img :src="img?img:defaultImg" class="avi" :onerror="defaultImg" alt="">
    <div class="select">
      <div class="box">
        <p @click="changepic">拍摄一张照片</p>
      </div>
      <div class="box">
        <p @click="changepic2">从相册选择</p>
      </div>
    </div>
    <span></span>
    <div class="wrap">
      <input type="text" v-model="username" placeholder="请输昵称">
      <p class="btn" @click="next">保存</p>
    </div>
  </div>
</template>    
<style lang="scss" scoped>
.avi {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  margin: 50px auto;
  display: block;
  object-fit: cover;
}
.select {
  display: flex;
  justify-content: space-around;
}
.box {
  position: relative;
  width: 100%;
  height: 1rem;
  p {
    color: #3fd9c9;
    font-size: 0.346667rem;
    text-align: center;
    line-height: 1rem;
  }
  input {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 100%;
    margin: 0;
  }
}

span {
  display: block;
  width: 8.293333rem;
  background: #e5e5e5;
  height: 1px;
  margin: 0.6rem auto;
}
input {
  border: none;
  border-bottom: 1px solid #e5e5e5;
  width: 8.293333rem;
  margin: 1.066667rem auto;
  outline: none;
  height: 0.8rem;
}
.btn {
  width: 8.16rem;
  height: 1.066667rem;
  margin: 0 auto 0;
  background: #3fd9c9;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  line-height: 1.066667rem;
  border-radius: 0.266667rem;
}
</style>
<script>
import { editUser, getById, upload,getPictureFromWeixin,getConfig } from "@/utils/interface";
import { Dialog } from "vant";
// import wx from "weixin-js-sdk";

export default {
  data() {
    return {
      img: "",
      username: "",
      te: "",
      defaultImg:'this.src="'+ require('../assets/user2.png') +'"',
    };
  },
  methods: {
    changepic() {
      let _this = this;
      wx.ready(function() {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            _this.getImg(res.localIds[0]);
            _this.img = res.localIds[0];
          }
        });
      });
    },
    changepic2() {
      let _this = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          _this.img = res.localIds[0];
          _this.getImg(res.localIds[0]);
        }
      });
    },
    getImg(id) {
      let _this = this;
      wx.uploadImage({
        localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var serverId = res.serverId; // 返回图片的服务器端ID
          getPictureFromWeixin({ media_id: serverId }).then(res => {
            _this.te = res.data.data;
          });
        }
      });
    },
    next() {
      Dialog.confirm({
        title: "提示",
        message: "确认修改？"
      })
        .then(() => {
          editUser({ avatar: this.te, username: this.username }).thern(res => {
            if (res.data.code == 200) {
              this.$router.go(-1);
            }
          });
        })
        .catch(() => {
          this.$router.go(-1);
        });
    },
    getUsers() {
      getById({ openid: localStorage.getItem("wechataccess_user_token") }).then(
        res => {
          this.img = res.data.data.avatar;
        }
      );
    },
    getConfig() {
      let _this = this;
      getConfig({
        url: "http://www.jiebaodingdan.com/customer-mobile/"
      })
        .then(
          function(res) {
            if (res.data.code == 200) {
              let appId = res.data.data.appId;
              let nonceStr = res.data.data.nonceStr;
              let signature = res.data.data.signature;
              let timestamp = res.data.data.timestamp;
              wx.config({
                //debug: true,        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: [
                  "checkJsApi",
                  "chooseImage",
                  "previewImage",
                  "uploadImage",
                  "downloadImage",
                  "getLocation"
                ]
              });
            }
          }.bind(this)
        )
        .catch(function(err) {
        });
    }
  },
  created() {
    document.title = "修改信息";
    this.getConfig();
    this.getUsers();
  }
};
</script>
























